
const user = {
    name: '小袁',
    age: 18
}

// 观察 user 对象
observe(user);

// 显示姓氏
function showFirstName() {
    document.querySelector('#firstName').textContent = `姓：${user.name[0]}`
}

// 显示名字
function showLastName() {
    document.querySelector('#lastName').textContent = `名：${user.name.slice(1)}`
}

function showAge() {
    document.querySelector('#age').textContent = `年龄：${user.age}`
}



// 初始化时调用自动运行函数, 并在autoRun函数内部执行showFirstName等函数时，
// 会将该函数存到局部变量数组中，这样当其他地方修改了 user 对象中的某个属性值时，会通知所有依赖于该属性的函数重新执行。
autoRun(showFirstName)
autoRun(showLastName)
autoRun(showAge)



// showFirstName()
// showLastName()
// showAge()



// // 修改后页面上显示的姓名不会改变
// user.name = '小明' 

// // 如何实现修改姓名后页面上显示的姓名更新？
// // 重新调用 内部用到了 name 属性的函数
// showFirstName()
// showLastName()

// // 但是有个问题，在这里修改了姓名之后，重新调用对应函数，要是在其他不知道的地方修改了 name（例如控制台修改），那又怎么调用呢？
// // 所以，最好的方式是，在修改 name 之后，通知所有依赖于 name 的函数，让它们重新执行。就可以使用 Object.defineProperty() 方法来实现。
// let initialName = user.name
// Object.defineProperty(user, 'name', {
//     get() {
//         return initialName
//     },
//     set(value) {
//         initialName = value
//         showFirstName()
//         showLastName()
//     }
// })

// user.name = '小红' // 页面上显示的姓名会更新

// 需要实现通用的响应式数据更新，可以使用 观察者模式 来实现。
